{% extends '@AdsPlace/admin.twig' %}

{#内容部分#}
{% block content %}
   <div class="mod12">
       <div class="right-head">
            <el-breadcrumb separator-class="el-icon-arrow-right">
             <el-breadcrumb-item >投放管理</el-breadcrumb-item>
             <el-breadcrumb-item>投放广告</el-breadcrumb-item>
           </el-breadcrumb>
       </div>
       <div class="toolbar-btn-action">
           
           <div class="searchBox">
               
                    <el-input placeholder="请输入广告位名称或者广告位ID"
                     v-on:change="onKeywordChange"
                     v-model="keyword" class="input-with-select">
                     
                      <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                 
           </div>
       {# 功能按钮#}
           <el-button
           @click="openNewPlaceDrawer"
            type="primary" icon="el-icon-plus">新建广告投放</el-button>
           {#
           <el-button-group>
                <el-button type=""  v-bind:disabled="stopDisabled">停用</el-button>
                <el-button type="" v-bind:disabled="delDisabled">删除</el-button>
                <el-button type=""  v-bind:disabled="startDisabled">启用</el-button>
                 <el-button type="" v-bind:disabled="getCodeDisabled" >获取代码</el-button>
              </el-button-group>#}
           <el-button type="" @click="OnShowPlaceSearch" >
           筛选 <i ref="dropIcon" class="el-icon-caret-top"></i>
           <!-- el-icon-caret-bottom | top-->
           </el-button>
       </div>
       {# 这里是新增广告位   #}
       <el-drawer
          ref="newPlaceDrawer"
          title="新建广告投放"
          :append-to-body="true"
          :visible.sync="drawerNewPlace"        
          :show-close="true"
          :before-close="handleDrawerClose"
          :wrapper-closable='false'
          :destroy-on-close="true"
          :with-header="true"
          size="85%">
           <div class="formBox" >
              <set-place-form
              {# 编辑传递属性 #}
              :idadverte="idAdverte"
              {# 复制传递属性 #}
              :idcopy="idCopy"
              v-on:onclosedrawer="onCloseDrawer"
              ></set-place-form>
           </div>
        </el-drawer>
   {# 筛选功能表单 #}
  <el-card class="rowbox"   v-if="showPlaceSearch">  
      <transition name="fade">
        <set-place-search 
         v-on:onselectchange="onSelectChange"></set-place-search>
      </transition>  
  </el-card>

  {# 列表内容显示区域 #}
       <div class="table-responsive"  v-loading="tableLoading">
            <el-table
                     v-bind:data="tablelist"                           
                     border
                      ref="multipleTable"
                       @selection-change="handleSelectionChange"
                     style="width: 100%">
              <el-table-column
                          type="selection"
                          width="38"> 
                  </el-table-column>      
              <el-table-column
                     prop="adverteName"
                     label="投放名称"
                     width="180">
                     <template slot-scope="scope">
                        <a><span class="eslip1"> ${scope.row.adverteName} </span> </a><br/>
                        <span>ID: ${scope.row.id} </span>
                     </template>
                     </el-table-column>
             <el-table-column
                     prop="status"
                     label="状态"   width="100"  >
                     <template slot-scope="scope">
                        <span v-if="scope.row.status==1"> 
                        <i class="el-icon-s-opportunity" style="color:#999;"></i>待投放</span>
                        <span v-if="scope.row.status==2"> 
                        <i class="el-icon-s-opportunity" style="color:#1976d2;"></i>正在投放</span>
                        <span v-if="scope.row.status==3"> 
                        <i class="el-icon-s-opportunity" style="color:#ff0000;"></i>暂停</span>
                        <span v-if="scope.row.status==9"> 
                        <i class="el-icon-s-opportunity" style="color:#000;"></i>结束投放</span>
                     </template>
                     </el-table-column>
             <el-table-column
                     prop="placetype"
                     label="代码位"  >
                      <template slot-scope="scope">
                        <div v-if="scope.row.placeIds">
                        <p class="eslip1"  v-for="(item, index) in scope.row.placeIdsArr" :key="index" :label="item.value">
                           <el-tooltip class="item" effect="light" 
                           :content="  item.placeName + '['+ item.placeWidth+ item.sizeDot+ item.placeHeight+']' " placement="left">
                              <span>  ${item.id}-${item.placeName}-(${item.placeWidth}${item.sizeDot}${item.placeHeight} )</span>
                            </el-tooltip>
                           </p>
                        </div>
                     </template>
                     </el-table-column>
             <el-table-column
                     prop="medias"
                     label="物料"  >
                      <template slot-scope="scope">
                       <div v-if="scope.row.medias">
                        <p class="eslip1"  v-for="(item, index) in scope.row.mediasArr" :key="index" :label="item.value">
                           <el-tooltip class="item" effect="light" 
                           :content="  item.name + '['+ item.type +']' " placement="left">
                              <span> ${item.id}-${item.name}-[${item.type}]</span>
                            </el-tooltip>
                          </p>
                        </div>
                     </template>
                  </el-table-column>     
               <el-table-column
                     prop="caculateMethod"
                     label="计费"  width="90"   >
                      <template slot-scope="scope">
                        <span>${scope.row.caculateMethod|filter_caculateMethod }</span>
                     </template>
                     </el-table-column>       
             <el-table-column
                     prop="startday"
                     label="投放时间" width="190"  >
                     <template slot-scope="scope">
                       <p v-if="scope.row.proid==2"> <span>${scope.row.proidRows} </span></p>
                       <p v-else> <span>${scope.row.startday}~${scope.row.endday}</span></p>
                     </template>

                     </el-table-column>   
            <el-table-column
                     prop="startday"
                     label="进度"  >
                     <template slot-scope="scope">
                       <time-progress :adverte="scope.row"></time-progress>
                     </template>

                     </el-table-column>  

              <el-table-column
                     prop="status"
                     label="策略"   >
                     <template slot-scope="scope">
                        <el-button size="mini" type="text"> 详细设置 </el-button>
                     </template>
                     </el-table-column>                     
              <el-table-column label="操作" width="130">
                        <template slot-scope="scope">
                           {# <el-button
                           size="mini"                          
                           
                           <i class="el-icon-edit"></i>编辑</el-button>   #}
                           
                            <el-dropdown @command="handleCommand"
                            @click="handleEdit(scope.$index, scope.row)" 
                              size="mini" split-button type="plain" >
                              <span class="el-dropdown-link"> <i class="el-icon-edit"></i>编辑</span>
                              
                              <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item :command="{index:scope.$index, row:scope.row,action:'delete'}"
                               icon="el-icon-delete">删除</el-dropdown-item>
                              <el-dropdown-item  :command="{index:scope.$index, row:scope.row,action:'copy'}"
                               icon="el-icon-document-copy"> 复制</el-dropdown-item>
                              <el-dropdown-item  :command="{index:scope.$index, row:scope.row,action:'chart'}"
                               icon="el-icon-pie-chart"> 报告</el-dropdown-item>
                           
                              </el-dropdown-menu>
                           </el-dropdown>

                        </template>
                     </el-table-column>
                  </el-table>
         </div>
         <div class="pagination" style="margin-left: -10px;">
         <el-pagination
               background
                  :page-size="pageSize"
               @current-change="handleCurrentChange"
               @size-change="handlePageSize"
               :page-sizes="[5,10,20,30,50,70,100]"
                  layout="prev, pager, next,total,jumper,sizes"
                  :total="total" :page-count="total" >
         </el-pagination>
         </div>
   {# table内容 #}
   </div>
{% endblock%}
{# 这里加入需要的vue组件js#}
{% block pagejs %}
 <script src="./plugins/AdsPlace/js/dist/index.js"></script> 
 <script src="./plugins/AdsPlace/js/page/setplace.js"></script>   
{% endblock%}